import {uDisableReportConf, uEditReportConf} from '@/api/alarm'
import {FormInstance} from 'ant-design-vue'
import dayjs, {Dayjs} from 'dayjs'
import {PropType} from 'vue'
import {ChangeVisible} from '../modal'
import {CnBoldSpan, CnNormalSpan} from '../text'
const AlarmWXConfigModalForm = defineComponent({
  props: {
    changeVisible: Function as PropType<ChangeVisible>,
    config: {
      type: Object as PropType<Alarm.ConfigData>,
      required: true
    }
  },
  emits: {
    finish: (formRef?: FormInstance) => true,
    reset: (formRef?: FormInstance) => true
  },
  setup(props, {emit, slots}) {
    const state = reactive<{
      form: {
        startTime: Dayjs
        endTime: Dayjs
        intervalTime: number
        dayTime: number
      }
    }>({
      form: {
        startTime: dayjs(),
        endTime: dayjs(),
        intervalTime: 2,
        dayTime: 6
      }
    })

    watch(
      () => props.config,
      n => {
        if (!n) {
          state.form = {
            startTime: dayjs(),
            endTime: dayjs(),
            intervalTime: 2,
            dayTime: 6
          }
          return
        }

        state.form.startTime = n.devReportStartTime
          ? dayjs(dayjs().format('YYYY-MM-DD') + ' ' + n.devReportStartTime)
          : dayjs()
        state.form.endTime = n.devReportEndTime
          ? dayjs(dayjs().format('YYYY-MM-DD') + ' ' + n.devReportEndTime)
          : dayjs()
        state.form.intervalTime = Number(n.devReportIntervalTime)
        state.form.dayTime = n.devReportTopLimit
      },
      {immediate: true, deep: true}
    )

    function handleConfirmClick() {
      console.log(state.form)
      uEditReportConf({
        devReportConfId: props.config.devReportConfId,
        devReportEndTime: state.form.endTime.format('HH:mm'),
        devReportIntervalTime: String(state.form.intervalTime),
        devReportTopLimit: state.form.dayTime,
        devReportStartTime: state.form.startTime.format('HH:mm')
      })
        .then(res => {
          props.changeVisible && props.changeVisible(false)
          emit('finish')
        })
        .catch(err => {
          props.changeVisible && props.changeVisible(false)
        })
    }

    function handleCancelClick() {
      props.changeVisible && props.changeVisible(false)
    }

    onMounted(() => {})

    return () => (
      <div class='relative'>
        <table class='table-auto block w-full pl-32 mb-21'>
          <tbody>
            <tr class='h-56 flex items-center'>
              {/* 属性 */}
              <td class=''>
                <CnNormalSpan class='text-text'>开始时间</CnNormalSpan>
              </td>
              {/* 输入框 */}
              <td class='w-198 ml-24'>
                <a-time-picker
                  class='w-full h-32'
                  v-model={[state.form.startTime, 'value']}
                  allowClear
                  format='HH:mm'
                />
              </td>
              {/* 单位 */}
              <td></td>
            </tr>
            <tr class='h-56 flex items-center'>
              <td class=''>
                <CnNormalSpan class='text-text'>结束时间</CnNormalSpan>
              </td>
              <td class='w-198 ml-24'>
                <a-time-picker
                  class='w-full h-32'
                  v-model={[state.form.endTime, 'value']}
                  allowClear
                  format='HH:mm'
                />
              </td>
              <td></td>
            </tr>
            <tr class='h-56 flex items-center'>
              <td class=''>
                <CnNormalSpan class='text-text'>间隔时段</CnNormalSpan>
              </td>
              <td class='w-198 ml-24'>
                <a-input
                  class='w-full'
                  v-model={[state.form.intervalTime, 'value']}
                  type='number'
                  placeholder='请输入'
                ></a-input>
              </td>
              <td class='h-full inline-block pt-26'>
                <CnNormalSpan class='ml-8'>{'(小时)'}</CnNormalSpan>
              </td>
            </tr>
            <tr class='h-56 flex items-center'>
              <td class=''>
                <CnNormalSpan class='text-text'>每天次数</CnNormalSpan>
              </td>
              <td class='w-198 ml-24'>
                <a-input
                  class='w-full'
                  v-model={[state.form.dayTime, 'value']}
                  type='number'
                  placeholder='请输入'
                ></a-input>
              </td>
              <td class='h-full inline-block pt-26'>
                <CnNormalSpan class='ml-8'>{'(最多)'}</CnNormalSpan>
              </td>
            </tr>
          </tbody>
        </table>

        <div class='ant-modal-footer'>
          <a-button class='ant-btn' onClick={handleCancelClick}>
            取消
          </a-button>
          <a-button class='ant-btn' type='primary' onClick={handleConfirmClick}>
            确定
          </a-button>
        </div>
      </div>
    )
  }
})

export default AlarmWXConfigModalForm
